<template>
	<view class="bigbox">
		<!-- 上传附件 -->
		<view class="bj_box">
			<view @click="bj_sta=true">编辑</view>
			<view @click="bj_sta=false">确认</view>
		</view>
		<view v-for="item in list4">
			<view class="fot1">{{item.query03}}</view>
			<view class="img_box">
				<view class="img_box1" v-for="(item1,index) in item.data01">
					<image v-if="item.query02 != 'video'" :src="item1" @click="uploading(item,index)"></image>
					<video class="" v-if="item.query02 == 'video' && item1 != item.query07" :src="item1" controls  ></video>
					<image v-if="item.query02 == 'video' && item1 == item.query07" :src="item1" @tap="video_uploading(item,index)"></image>
					<view :class="item.data01.length-1 != index?'zhezhao':'zhezhao1'" @click="shan(item1,index,item)" v-if="bj_sta">
						<image class="" src="../../static/83.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn1">
			<view class="all_btn btn_all" @click="xiayibu()">保存</view>
			<view class="all_btn btn_all" @click="tijiao()">提交</view>
		</view>
		<tanchuang v-if="tc_tijiao"
		 @tcnr="tanchuaung_nr"
		 @tcgb="tanchuaung_gb"></tanchuang>
	</view>
</template>

<script>
	import tanchuang from '../../component/tanchuang.vue'
	export default {
		data() {
			return {
				tc_tijiao:false,
				bj_sta:false,
				sta:1,
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				index: 0,
				id:''
			}
		},
		components:{tanchuang},
		onLoad:function(option){
			console.log(option.item,11111111111)
			this.id = JSON.parse(option.item).id
			this.initial()
		},
		methods: {
			xiayibu:function(){
				// this.loading_sta = true
				let arr = this.list4
				let arr1 = []
				arr.forEach((item,index)=>{
					item.data01.pop()
					arr1.push(item)
					console.log(item)
				})
				arr1.forEach((item,index)=>{
					let a = new Array(item.data01);
					let b = a.join(",");
					arr1[index].data01 = b
					arr1[index].query05 = arr1[index].data01
				})
				console.log(arr)
				this.$put('buse/fxjBuse_02/edit01',{
					"createBy": "",
					"createTime": "",
					"data01": "",
					"data02": "",
					"data03": "",
					"data04": "",
					"data05": "",
					"data06": "",
					"data07": "",
					"data08": "",
					"data09": "",
					"data10": "",
					fxjBuseitem_01List:arr1,
					"id": "",
					"query01": "",
					"query02": "",
					"query03": "",
					"query04": "",
					"query05": "",
					"query06": "",
					"query07": "",
					"query08": "",
					"query09": "",
					"query10": "",
					"query11": "",
					"query12": "",
					"query13": "",
					"query14": "",
					"query15": "",
					"query16": "",
					"query17": "",
					"query18": "",
					"query19": "",
					"query20": "",
					"query21": "",
					"query22": "",
					"query23": "",
					"query24": "",
					"query25": "",
					"query26": "",
					"query27": "",
					"query28": "",
					"query29": "",
					"query30": "",
					"query31": "",
					"query32": "",
					"query33": "",
					"query34": "",
					"query35": "",
					"query36": "",
					"query37": "",
					"query38": "",
					"query39": "",
					"rid": "",
					"rowStatus": "",
					"sysOrgCode": "",
					"teantId": "",
					"updateBy": "",
					"updateTime": ""
				}).then((res)=>{
					console.log(res,1111111)
					if(res.data.success){
						uni.showToast({
							title:'保存成功',
							icon:'none'
						})
						// this.loading_sta = false
						this.tupian()
					}
				})
			},
			video_uploading: function (item,index) {
			    uni.chooseVideo({
			        count: 1,
			        sourceType: ['camera', 'album'],
			        success:  (res) => {
			            this.src = res.tempFilePath;
						console.log(res.tempFilePath)
						uni.uploadFile({
							url: this.$headUrl + 'sys/common/upload',
							filePath: res.tempFilePath,
							name: 'file',
							header:{
								'X-Access-Token': uni.getStorageSync('token')
							},
							success: (res) => {
								console.log(res)
								if(JSON.parse(res.data).success){
									item.data01[index] = JSON.parse(res.data).message
									item.data01.push(item.query07)
								}
							}
						});
			        }
			    });
			},
			uploading:function(item,index){
				console.log(item)
				if(item.data01.length-1 == index){
					uni.chooseImage({
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							this.img = tempFilePaths[0]
					        uni.uploadFile({
					            url: this.$headUrl + 'sys/common/upload',
					            filePath: tempFilePaths[0],
					            name: 'file',
								header:{
									'X-Access-Token': uni.getStorageSync('token')
								},
					            success: (res) => {
									// console.log(JSON.parse(res.data).message)
									if(JSON.parse(res.data).success){
										item.data01[index] = JSON.parse(res.data).message
										item.data01.push(item.query07)
										// if(item.query05[item.query05.length - 1] != item.query07){
										// 	item.query05.push(item.query07)
										// }
										
									}
									console.log(item)
									
					            }
					        });
					    }
					});
				}else{
					console.log('删除')
				}
				
			},
			tanchuaung_gb:function(data){
				this.tc_tijiao = false;
			},
			tanchuaung_nr:function(data){
				this.xiayibu()
				this.$post('buse/fxjBuse_02/addFxjBuseitem_09',{
					rid:this.id,
					query02:data.spjg,
					query03:data.spyj,
					query05:data.nbyj
				}).then((res)=>{
					console.log(res.data,7777)
					if(res.data.success){
						this.tc_tijiao = false
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							});
						},1000)
					}else if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
				})
			},
			tijiao:function(){
				this.tc_tijiao = true
			},
			// 删除
			shan:function(item1,i,item){
				console.log(item)
				uni.showModal({
				title: '提示',
				content: '确认删除该图片或视频吗？',
				success: function (res) {
					let arr = []
					if (res.confirm) {
						item.data01.forEach((item1)=>{
							if(item1 != item.data01[i]){
								console.log(item1,111111)
								arr.push(item1)
							}
						})
						item.data01 = arr
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
				})
			},
			tupian:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_01ByMainId',{
					pageNo:1,
					pageSize:9999,
					rid:this.id
				}).then((res)=>{
					this.list4 = res.data.result.records
					this.list4.forEach((item)=>{
						// console.log(item.data01)
						if(item.data01 == null || item.data01 == ''){
							// console.log(123165158)
							item.data01 = []
							item.data01.push(item.query07)
						}
						if(item.data01[item.data01.length - 1] != item.query07){
							item.data01 = JSON.parse(item.data01)
							item.data01.push(item.query07)
						}
						
					})
					console.log(this.list4)
				})
			},
			// 数组去重/重组
			unique1:function(arr){
				for (let i = 0; i < arr.length; i++) {
					if(this.list1.indexOf(arr[i].query10)==-1){
						this.list1.push(arr[i].query10);
					}
				}
				// console.log(this.list1)
				this.list1.forEach((item)=>{
					let a = {
						title:'',
						data:[]
					}
					a.title = item
					this.list2.push(a)
				})
				this.list3.forEach((item)=>{
					// console.log(item.query10)
					this.list2.forEach((item1)=>{
						if(item.query10 == item1.title){
							if(item.query12 != ''){
								item.query12 = JSON.parse(item.query12)
							}
							item1.data.push(item)
						}
					})
					this.list2.forEach((item)=>{
						item.data.forEach((item1)=>{
							if(item1.query02 == '出生日期'){this.date1 = item1.query07}
							if(item1.query02 == '有效期开始日期'){this.date2 = item1.query07}
							if(item1.query02 == '有效日期截止日期'){this.date3 = item1.query07}
						})
					})
				})
			  // console.log(this.list2)
			},
			initial:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_08ByMainId',{
					pageNo:1,
					pageSize:9999,
					rid:this.id
				}).then((res)=>{
					this.list3 = res.data.result.records
					this.unique1(res.data.result.records)
				})
				this.tupian()
			}
			
			
			
		}
	}
</script>

<style>
.loading_box{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.1);
		position: fixed;
		z-index: 100000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn1>view{
		width: 48%;
	}
	.btn1{
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	}
	.bj_box>view{
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #0F77FE;
		color: #0F77FE;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	.bj_box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zhezhao>image,.zhezhao1>image{
		width: 35rpx;
		height: 35rpx;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zhezhao1{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.btn_all{
		margin: 50rpx 0;
	}
	.img_box1>image,.img_box1>video{
		width: 100%;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.img_box1{
		width: 30%;
		height: 150rpx;
		margin-right: 3.3%;
		text-align: center;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		position: relative;
		/* border: 1px solid red; */
		margin-bottom: 30rpx;
	}
	.img_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.fot3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(244,48,48,1);
	}
	.fot2{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-bottom: 19rpx;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
		margin-top: 20rpx;
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.box2>input{
		text-align: right;
		font-size:30rpx;
	}
	.box2{
		height:88rpx;
		background:rgba(250,250,250,0.3);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(0,0,0,1);
		margin-top: 20rpx;
	}
	.active{
		background: #0F77FE;
		color: #FFFFFF !important;
	}
	.tab2{
		border-radius: 0 30rpx 30rpx 0;
	}
	.tab1{
		border-radius: 30rpx 0 0 30rpx;
	}
	.tab_box>view{
		width: 30%;
		height: 64rpx;
		border: 1px solid #0F77FE;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(15, 119, 254, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.tab_box{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 50rpx;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
